<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HOOC 我的职业课堂</title>
    <link rel="shortcut icon" href="img/logo.ico"/>
    <link rel="bookmark" href="img/logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="js/cacheUtil.js"></script>
    <script src="js/httpUtil.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<div class="container">
    <iframe src="head.html" frameborder="0" width="100%" height="72" scrolling="No"></iframe>
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>

        <!-- 轮播图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="img/carousel01.jpg">
            </div>
            <div class="carousel-item">
                <img src="img/carousel02.jpg">
            </div>
            <div class="carousel-item">
                <img src="img/carousel03.jpg">
            </div>
        </div>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
</div>
<br><br>
<div class="container"><img src="img/free.jpg"></div>
<br><br>
</div>

<div class="container">
    <div class="row" id="div_course_list">

    </div>
    <img src="img/indexInfo.jpg" alt="" class="container">
    <br><br>

    <iframe src="bottom.html" frameborder="0" width="100%" height="200" scrolling="No"></iframe>


</div>

<template id="template_course">
    <div class="col-xm-3 col-md-4" id="course_item" onclick="toDes(this)">
        <div class="thumbnail container" style="text-align: center">
            <img src="{img}" alt="..." class="container">
            <p hidden id="course_id">{id}</p>
            <!--<input hidden id="course_id">{id}</input>-->
            <div class="caption container">
                <h3 id="name">{name}</h3>
                <p class="des_limit">{des}</p>
            </div>
        </div>
    </div>
</template>

<script>
    //加载页面->显示商品列表
    $(function () {
        loadGoodsList();
        loadUserInfo();
    });

    function loadUserInfo() {
        let user = getLoginUser();
        console.log(user)
        $("#name1").html(user.name);
        $("#password").html(user.password);
        $("#email").html(user.email);
        $("#sex").html(user.sex);
    }

    //ajax 请求后台获取商品列表数据
    function loadGoodsList() {
        console.log("loadGoodsList");
        //发起ajax请求
        let url = "/course/showAll";
        // let params = {userId: 1000, userName: "jerry"};
        httpGetNoParams(url, function (resp) {
            console.log(resp);
            renderingGoodsList(resp);
        });
    }

    //渲染显示商品列表
    function renderingGoodsList(courseList) {
        let templateCourseHtml = $("#template_course").html();
        let courseListHtml = "";
        let tempCourseHtml;
        //遍历商品列表
        $.each(courseList, function (index, course) {
            //后台数据填充到模板中
            tempCourseHtml = templateCourseHtml.replace(/{name}/g, course.name)
                .replace(/{des}/g, course.des)
                .replace(/{img}/g, course.img)
                .replace(/{id}/g, course.id);
            courseListHtml += tempCourseHtml;
        });
        //拼接商品展示html
        //html 填充到页面当中
        $("#div_course_list").html(courseListHtml);
    }

    function watchClick() {
        console.log("已点击观看按钮");
    }

    // 获取当前点击的那个元素，通过选择器查找出course_id，然后发送ajax
    function toDes(data) {
        console.log("course_item clicked");
        let url = "/course/showDes";
        let course_id = data.querySelector("#course_id").innerHTML;
        console.log("course_id is : " + course_id);
        let param = "courseId=" + course_id;
        console.log("param is : " + param);
        httpGet(url, param, function (data) {
            saveCourse(data);
            location.href = "description.html";
        })
    }

</script>
</body>
</html>

